<template>
	<view class="container">
		<!-- 积分展示 -->
		<view class="points-box">
			<text class="points-text">当前积分：{{ points }}</text>
		</view>

		<!-- 日历区域 -->
		<view class="calendar">
			<!-- 星期标题 -->
			<view class="week-header">
				<text v-for="day in weekDays" :key="day" class="week-day">{{ day }}</text>
			</view>

			<!-- 日期格子 -->
			<view class="days-grid">
				<view v-for="(day, index) in calendarDays" :key="index" class="day-item" :class="{
            'current-day': day.isToday,
            'signed-day': day.isSigned,
            'disabled': !day.isCurrentMonth
          }" @click="handleSign(day)">
					<text class="day-number">{{ day.date }}</text>
					<text v-if="day.isSigned" class="sign-icon">✓</text>
				</view>
			</view>
		</view>

		<!-- 签到按钮 -->
		<view class="sign-btn" :class="{ signed: hasSignedToday }" @click="handleDailySign">
			<text>{{ hasSignedToday ? '今日已签到' : '立即签到' }}</text>
			<text v-if="!hasSignedToday" class="points-tip">+{{ dailyPoints }}积分</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 基础配置
	const dailyPoints = 10 // 每日签到积分
	const weekDays = ['日', '一', '二', '三', '四', '五', '六']

	// 响应式数据
	const points = ref(150) // 初始积分
	const signedDates = ref(new Set()) // 已签到日期
	const currentDate = ref(new Date()) // 当前视图日期

	// 计算属性
	const hasSignedToday = computed(() => {
		const todayStr = formatDate(new Date())
		return signedDates.value.has(todayStr)
	})

	// 日历日期生成
	const calendarDays = computed(() => {
		const year = currentDate.value.getFullYear()
		const month = currentDate.value.getMonth()
		const today = new Date()

		// 生成当月日期数据
		const days = []
		const firstDay = new Date(year, month, 1)
		const lastDay = new Date(year, month + 1, 0)

		// 填充空白
		for (let i = 0; i < firstDay.getDay(); i++) {
			days.push({
				date: '',
				isCurrentMonth: false
			})
		}

		// 填充当月日期
		for (let d = 1; d <= lastDay.getDate(); d++) {
			const date = new Date(year, month, d)
			const dateStr = formatDate(date)
			days.push({
				date: d,
				isToday: isSameDay(date, today),
				isSigned: signedDates.value.has(dateStr),
				isCurrentMonth: true
			})
		}

		return days
	})

	// 日期格式化
	const formatDate = (date) => {
		return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
	}

	// 日期比较
	const isSameDay = (d1, d2) => {
		return d1.getFullYear() === d2.getFullYear() &&
			d1.getMonth() === d2.getMonth() &&
			d1.getDate() === d2.getDate()
	}

	// 签到处理
	const handleDailySign = () => {
		if (hasSignedToday.value) return

		const todayStr = formatDate(new Date())
		signedDates.value.add(todayStr)
		points.value += dailyPoints
		uni.showToast({
			title: `签到成功 +${dailyPoints}积分`,
			icon: 'success'
		})
	}

	// 点击日期格子
	const handleSign = (day) => {
		console.log(day);
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		min-height: 100vh;
		background-color: #f8f9fa;
	}

	.points-box {
		background: linear-gradient(135deg, #1296db, #b0fae5);
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		text-align: center;

		.points-text {
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.calendar {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.week-header {
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;

		.week-day {
			color: #666;
			font-size: 28rpx;
			width: 70rpx;
			text-align: center;
		}
	}

	.days-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.day-item {
		width: calc(100% / 7);
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-radius: 12rpx;

		&.current-day {
			background-color: #e3f2fd;
		}

		&.signed-day {
			background-color: #c8e6c9;

			.sign-icon {
				position: absolute;
				bottom: 8rpx;
				right: 8rpx;
				color: #62e267;
				font-size: 24rpx;
			}
		}

		&.disabled {
			visibility: hidden;
		}
	}

	.day-number {
		font-size: 28rpx;
		color: #333;
	}

	.sign-btn {
		background: #4caf50;
		color: white;
		padding: 30rpx;
		border-radius: 50rpx;
		text-align: center;
		margin-top: 50rpx;
		font-size: 32rpx;
		transition: all 0.3s;

		&.signed {
			background: #9e9e9e;
		}

		.points-tip {
			display: block;
			font-size: 24rpx;
			margin-top: 10rpx;
			opacity: 0.8;
		}
	}
</style>